<template>
	<view>
		<view class="czmain">
			<view class="cztop">
				<view class="icon yticon icon-alipay u-f u-f-ajc">
					<view>支付宝</view>
				</view>
				<view class="czxx">充值方式</view>
				<view class="czyebox">
					<view>充值金额</view>
					<input type="digit" focus class="czye" v-model="price" />
					<view class="uni-btn-v uni-common-mt">
					<button  class="onstep" @click="requestPayment(1)">提交</button>
					</view>
				</view>
			</view>
			 
			
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                price: '',
				dbled:true,
                providerList: []
            }
        },
        onLoad: function() {

        },
        methods: {
            async requestPayment() {
                let orderInfo = await this.getOrderInfo(this.price);
                console.log("得到订单信息", orderInfo);
                if (orderInfo.statusCode !== 200) {
                    console.log("获得订单信息失败", orderInfo);
                    uni.showModal({
                        content: "获得订单信息失败",
                        showCancel: false
                    })
                    return;
                }
                uni.requestPayment({
                    provider: 'alipay',
                    orderInfo: orderInfo.data,
                    success: (e) => {
                        console.log("success", e);
                        uni.showModal({
                        	title: '提示',
                        	content: '支付成功',
                        	showCancel: false,
                        	success: res => {
                        		uni.navigateBack({
                        			delta:1,
                        		})
                        	}
                        });
                    },
                    fail: (e) => {
                        console.log("fail", e);
                        uni.showModal({
                            content: "支付失败,原因为:2 " + e.errMsg,
                            showCancel: false
                        })
                    },
                    complete: () => {
                        this.providerList[index].loading = false;
                    }
                })
            },
            getOrderInfo(e) {
                let url = this.config.webUrl+'/api/pay/czpay?token=' + uni.getStorageSync("userInfo").token + '&total=' + this.price;
                return new Promise((res) => {
                    uni.request({
                        url: url,
                        success: (result) => {
                            res(result);
                        },
                        fail: (e) => {
                            res(e);
                        }
                    })
                })
            }
        }
    }
</script>

<style>
	page{
		background: #f9f9f9;
	}
	.cztop{
		position: relative;
	}
	.czxx{
		position: absolute;
		top: 10px;
		font-size: 32upx;
		left: 50upx;
		color: #3a3a3a;
		font-family: iconfont;
		line-height: 30px;
	}
	.czyebox{
		padding: 20upx 50upx;
	}
	.czyebox>view:first-child{
		font-size: 32upx;
		color: #3a3a3a;
		line-height: 50px;
	}
	.czye{
		width: 100%;
		border-bottom: 1upx solid #e5e5e5;
		font-size: 29px;
		font-weight: bold;
		color: #3a3a3a;
		position: relative;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}
	.czye:after{
		position: absolute;
		top: -2px;
		left: 0;
		content: '￥';
		color: #3a3a3a;
		font-size: 18px;
	}
	.onstep{
		margin-top: 40upx;
		background: #007AFF!important;
	}
	.czmain{
		width: 94%;
		margin: 10px auto;
		overflow: hidden;
		background: #fff;
		border-radius: 16upx;
		padding-bottom: 20px;
		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
	}
	.icon-alipay{
		background: #fbfbfb;
		padding-bottom: 20upx;
	}
	.icon-alipay>view:first-child{
		margin-top: 10px;
		font-size: 32upx;
		padding-left: 0upx;
		color: #3a3a3a;
		font-family: iconfont;
		position: relative;
		line-height: 30px;
	}
	.icon-alipay:before {
	    content: "\e636";
		margin-top: 25upx;
		margin-right: 10upx;
		color: #007AFF;
	}
	.cztype>view:first-child:after{
		position: absolute;
		content:"\e66c";
		top: 0;
		left: 0;
		font-size: 26px;
		color: #05c160;
	}


 .rmbLogo {
        font-size: 40upx;
    }

    button {
        background-color: #007aff;
        color: #ffffff;
    }

    .uni-h1.uni-center {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    .ipaPayBtn {
        margin-top: 30upx;
    }
</style>
